<template>
  <a-drawer :open="visible" title="经销商对账详情" @close="onClose">
    <template #closeIcon>
      <close @on-close="onClose" />
    </template>
    <a-card size="small" title="基本信息" class="smart-margin-bottom10">
      <a-descriptions size="small" :column="3">
        <a-descriptions-item label="源订单号">{{ options.no }}</a-descriptions-item>
        <a-descriptions-item label="配送单号">{{ options?.delivery?.no }}</a-descriptions-item>
        <a-descriptions-item label="门店名称">{{ options?.store?.store_name }}</a-descriptions-item>
        <a-descriptions-item label="所属片区">{{ options?.store?.region?.name }}</a-descriptions-item>
        <a-descriptions-item label="创建人">{{ options.creator_name }}</a-descriptions-item>
        <a-descriptions-item label="订单类型">{{ TagType[options.order_type] }}</a-descriptions-item>
        <a-descriptions-item label="配送状态">{{ TagStatus[options.status] }}</a-descriptions-item>
        <a-descriptions-item label="单据日期">{{ options.create_time }}</a-descriptions-item>
        <a-descriptions-item label="经销商">{{ options?.dealer?.name }}</a-descriptions-item>
        <a-descriptions-item label="签收数量">{{ options?.totle_received_number }}</a-descriptions-item>
        <a-descriptions-item label="结算方式">{{ getDescByValue('RECEIVE_TYPE_ENUM', Number(options.payment_type)) }}</a-descriptions-item>
        <a-descriptions-item label="结算时间">{{ options?.sign?.create_time }}</a-descriptions-item>
      </a-descriptions>
    </a-card>
    <a-card size="small" title="签收信息" class="smart-margin-bottom10">
      <a-descriptions size="small" :column="3">
        <a-descriptions-item label="签收图片">
          <a-image-preview-group>
            <div v-for="item in options?.sign?.certificate?.split(',')" style="display: inline-block; margin-right: 5px">
              <a-image :width="options?.sign?.certificate ? 30 : 50" :src="item || failImg" />
            </div>
          </a-image-preview-group>
        </a-descriptions-item>
        <a-descriptions-item label="签收备注">{{ options?.sign?.remark }}</a-descriptions-item>
      </a-descriptions>
    </a-card>
    <a-card class="smart-margin-bottom10" size="small" :tab-list="tabList" :active-tab-key="activeKey" @tabChange="(key) => (activeKey = key)">
      <template #customTab="{ tab }">
        <span class="ant-card-head-title" :style="compactModeClass">
          {{ tab }}
        </span>
      </template>
      <template v-if="activeKey === 'pick'">
        <InventorySalesmanTable :enterpriseId="options.detail" :optionsIndex="optionsIndex" />
      </template>
      <template v-if="activeKey === 'return'">
        <ReturnGoodsTable :enterpriseId="options" :optionsIndex="optionsIndex" />
      </template>
    </a-card>
    <a-card size="small" title="提审信息" class="smart-margin-bottom10">
      <a-descriptions size="small" :column="3">
        <a-descriptions-item label="回库单图片">
          <a-image-preview-group>
            <div v-for="item in options?.abnormal?.certificate?.split(',')" style="display: inline-block; margin-right: 5px">
              <a-image :width="options?.abnormal?.certificate ? 30 : 50" :src="item || failImg" />
            </div>
          </a-image-preview-group>
        </a-descriptions-item>
        <a-descriptions-item label="回库单备注">{{ options?.abnormal?.remark }}</a-descriptions-item>
      </a-descriptions>
    </a-card>
  </a-drawer>
</template>

<script setup lang="ts">
import InventorySalesmanTable from './inventory-salesman-table.vue'
import ReturnGoodsTable from './return-goods-table.vue'
import { commissionApi } from '@/api/business/finance/commission-api'
import { useEnums } from '@/hooks/plugins/useEnums'
import failImg from '@/assets/images/notice/failImg.png'
const compactModeClass = inject('compactModeClass')
const { getDescByValue } = useEnums()
const emit = defineEmits(['refresh'])
enum TagType {
  '销售' = 1,
  '退货',
  '换货'
}

enum TagStatus {
  '待审核' = 1,
  '待出库',
  '待签收',
  '已完成',
  '已取消',
  '异常'
}

// --------------------- Drawer 显示与隐藏 ---------------------
// 是否展示
const visible = ref(false)
// 详情
const options = ref({})
// 详情tab
const activeKey = ref('pick')
const tabList = [
  {
    key: 'pick',
    tab: '签收明细'
  },
  {
    key: 'return',
    tab: '回库明细'
  }
]
// 商品
const optionsIndex = ref('')

async function showDrawer(item, index) {
  optionsIndex.value = index
  const res = await commissionApi.dealerOrderDetail({ id: item.id })
  options.value = res.data
  visible.value = true
}

const onClose = () => {
  visible.value = false
}

defineExpose({
  showDrawer
})
</script>
